<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{ margin:0; padding:0; list-style:none;}
#div1{ width:780px; height:400px; position:absolute; left:50%; top:50%; margin-left:-390px; margin-top:-200px; border:1px solid black; overflow:hidden;}
#div1 .sMove{ height:358px; position:absolute; top:0; left:0;transition:0.5s all ease;}
#div1 .sMove div{ width:780px; height:358px; float:left;}
#div1 .nav{ width:780px; height:42px; position:absolute; left:0; bottom:0; background:#ccc}
#div1 .nav ul{ width:162px; height:30px; float:right; position:relative; margin-top:5px;} 
#div1 .nav ul li{ width:38px; height:28px; float:left; border:1px solid black; cursor:pointer; margin-left:8px;}
#div1 .nav ul div{ width:38px; height:28px; border:1px solid #39b5e7; position:absolute; left:8px; top:0; cursor:pointer;transition:0.3s left ease;}
#div1 .sLast{ width:50px; height:50px; background:black; position:absolute; left:0; top:50%; margin-top:-25px; text-align:center; font:20px/50px Arial; color:white; cursor:pointer;}
#div1 .sPrav{ width:50px; height:50px; background:black; position:absolute; right:0; top:50%; margin-top:-25px; text-align:center; font:20px/50px Arial; color:white; cursor:pointer;}
</style>

<title>Untitled Document</title>
</head>

<body>
<div id="div1">
	<div class="sMove">
    	<div style="background:yellow"></div>
        <div style="background:blue"></div>
        <div style="background:green"></div>
    </div>
    <div class="nav">
    	<ul> 
            <div></div>
        	<li style="background:yellow"></li>
            <li style="background:blue"></li>
            <li style="background:green"></li>
         
        </ul>
    </div>
    <div class="sLast" id='left'>左</div>
    <div class="sPrav" id='right'>右</div>
</div>

<script type="text/javascript">
    

    var allLi = document.querySelectorAll('.nav li');
    var moveDiv = document.querySelector('.nav div');
    document.querySelector('.sMove').style.width = document.querySelector('.sMove').children.length * document.querySelector('.sMove').children[0].offsetWidth + 'px';
    var needMoveDiv = document.querySelector('.sMove');

    var needIndex = 0;
    for(var i = 0;i < allLi.length;i++){
        allLi[i].index = i;
        allLi[i].onmouseover = function(){
            moveDiv.style.left = this.offsetLeft + 'px';
            needMoveDiv.style.left = -this.index * needMoveDiv.children[0].offsetWidth + 'px';
            needIndex = this.index;
        }
    };

    right.onmousedown = function(){
        return false;
    };
    left.onmousedown = function(){
        return false;
    };
    right.onclick = function(){
        needIndex++;
        if(needIndex == allLi.length)needIndex= 0;
        moveDiv.style.left = allLi[needIndex].offsetLeft + 'px';
        needMoveDiv.style.left = -needIndex * needMoveDiv.children[0].offsetWidth + 'px';

    }
    left.onclick = function(){
        needIndex--;
        if(needIndex == -1)needIndex= allLi.length-1;
        moveDiv.style.left = allLi[needIndex].offsetLeft + 'px';
        needMoveDiv.style.left = -needIndex * needMoveDiv.children[0].offsetWidth + 'px';

    }
</script>
</body>
</html>
